<template>
  <view>
     <uni-nav-bar title="" height="175rpx" :border="false" @clickLeft="clickLeft"><!-- @clickRight="clickRight" -->
      <template v-slot:left>
        <view class="left">
          <view class="">
            <uni-icons type="back" color="#666" size="18" />
          </view>
          <view class="title">收藏</view>
        </view>
      </template>
      <template v-slot:right>
        <view class="right">
          <view class="title">编辑</view>
        </view>
      </template>
     </uni-nav-bar>
     <view class="main">
       <view class="tab">
         <view class="view" @click="changeTab(1)">
           <view :class="tabIndex==1?'texted':'text'">
             组合
           </view>
         </view>
         <view class="view" @click="changeTab(2)">
           <view :class="tabIndex==2?'texted':'text'">
             单品
           </view>
         </view>
       </view>
       <view class="navbarborder"></view>
       <view class="content">
         <view class="list">
           <view class="view">
             <view class="img">
               <image src="../../static/prebook/temp1.png" mode=""></image>
             </view>
             <view class="box">
               <view class="mark">
                 <view class="text">
                   单层龙血树
                 </view>
                 <view class="icon">
                   <image src="../../static/prebook/xiangyou.png" mode=""></image>
                 </view>
               </view>
               <view class="mark">
                 <view class="text">
                   A0512 037
                 </view>
                 <view class="icon">
                   <image src="../../static/prebook/xiangyou.png" mode=""></image>
                 </view>
               </view>
             </view>
           </view>
         </view>
       </view>
     </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const clickLeft = () => {
    console.log('clickLeft',)
  }
  // const clickRight = () => {
  //   console.log('clickRight',)
  // }
  const tabIndex = ref(1)
  const changeTab = (e) => {
    console.log('选择tabIndex', e)
    tabIndex.value = e
    console.log('tabIndex.value', tabIndex.value)
  }
</script>

<style lang="scss" scoped>
  $nav-height: 30px;  
  .input-uni-icon {
  	line-height: $nav-height;
  }
  .left{
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
      height: 170rpx;
      width: 100%;
      line-height: 170rpx;
    }
  }
  .right{
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
      height: 170rpx;
      width: 100%;
      line-height: 170rpx;
      color: rgb(48,161,249);
    }
  }
  .main{
    width: 100%;
    background-color: rgb(246,246,246);
    height: 100%;
    // border: 2rpx solid red;
    .tab{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      height: 100rpx;
      align-items: center;
      // border: 1px solid red;
      background-color: #fff;
      .view{
        width: 15%;
        height: 80rpx;
        // border: 1rpx solid green;
        display: flex;
        align-items: center;
        justify-content: center;
        .text{
          color:#000;
          height: 60rpx;
          border-bottom: 5rpx solid #fff;
        }
        .texted{
          color: #000;
          height: 60rpx;
          font-weight: 700;
          border-bottom: 5rpx solid rgb(14,85,237);
        }
      }
    }
  }
  .navbarborder{
    height: 0;
    border-top: 2rpx solid #EEEEEE;
  }
  .content{
    padding: 10rpx;
    .list{
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      .view{
        width: 375rpx;
        height: 600rpx;
        // border: 1rpx solid red;
        .img{
          width: 375rpx;
          height: 500rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .box{
          width: 375rpx;
          height: 100rpx;
          // border: 1rpx solid red;
          background-color: #fff;
          padding-right: 100rpx;
          overflow: hidden;
          .mark{
            margin: 5rpx 0;
            height: 40rpx;
            border-radius: 40rpx;
            border: 1rpx solid #EEEEEE;
            display: flex;
            justify-content: center;
            align-items: center;
            .text{
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .icon{
              width: 30rpx;
              height: 30rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              image{
                width: 100%;
                height: 100%;
              }
            }
          }
          
        }
      }
    }
  }
</style>